import React, { Component } from 'react'
import { Table,Button,Icon,Row,Col} from 'antd';
import styles from './menu.less'



export default class menu extends Component {
    constructor(props){
        super(props);
        this.state={
            cart:[],
            menu:{}
        };
    }

    //挂载函数
    componentDidMount(){
        //注意一个问题  请求的是本地的静态文件  json文件都应该放在public文件夹  
        fetch('./menu.json')
        .then(function(response){
            return response.json();
        })
        //这里有一个问题   修改menu的时候  需要绑定this   需要使用箭头函数  不然修改不了state的状态
        .then((data) => {
            this.setState({
                menu:data
            });
        })
        .catch(function(e){
            console.log("获取请求失败");
        })
    }

    //渲染菜单
    renderMenuTable(){
    const columns=[
        {
        key:'size',
        title:'尺寸',
        dataIndex:'size',
        render:(text,record)=>{
            //console.log(record);//这是所有的对象
            //console.log(text);//这是s对应key即size的内容
            //解决长度不一
            if(record.price){
                return <span>{text}</span>;
            }
            return {
                children:<strong>{text}</strong>,
                props:{
                    colSpan:2
                }
            }
        }
    },
    {
        key:'price',
        title:'价格',
        dataIndex:'price',
        render:(text,record)=>{
            //console.log(record);//这是所有的对象
            //console.log(text);//这是s对应key即size的内容
            return <span>{text}</span>
        }
    },
    {
        key:'action',
        title:'加入',
        render:(text,record)=>{
            const obj={
                children:(
                    <Button className={styles.addBtn} onClick={()=>handleAddMenus(record)}>
                        <Icon type='plus'></Icon>
                    </Button>
                ),
                props:[]
            };
            if(!record.price){
                obj.props.colSpan=0;//设置当没有价格时，不显示加入功能的图标
            }
            return obj;
        }
    }];

    //处理添加菜单的事件
    const handleAddMenus=(record)=>{
        //console.log(record);拿到对象
        //const {name,size,price}=record; 后面菜单增减要用到key值 不需解构  可以直接拿record用
        //onsole.log(name,size,price);
        //存储到购物车的对象当中去
        let {cart} =this.state;
        const index=cart.findIndex(item=>item.key===record.key);
        console.log(index);
        index>=0
        ?cart.splice(index,1,{
            ...cart[index],
            count:cart[index].count+1
        }):
        (cart=[
            ...cart,{
                ...record,
                count:1
            }
        ]);
        this.setState({
            cart
        });
    }

    let data=this.state.menu;
    //处理数据逻辑
    let dataSource=[];
    for(const key in data){
        //console.log(data[key]);
        const item=data[key];
        dataSource.push({
            key:item.name,
            //为什么这里用name:item.name就不能显示pizza的名字,区分打印一下datasource就知道了菜单需要用什么
            size:item.name
        });
        item.options.forEach((ele,index) => {
            dataSource.push({...ele,name:item.name,key:key+'-'+index});
        });
    }
    //console.log(dataSource);
        return (
            <Table columns={columns} dataSource={dataSource} className={styles.menuTable}></Table>
        )
    }

    //渲染购物车
    renderCartTable(){
        const columns=[{
            keys:'count',
            title:'数量',
            dataIndex:'count',
            render:(text,record)=>(
                <span>
                    <Button className={styles.cartBtn} onClick={()=>handleDecrease(record)}>-</Button>
                    <span>{record.count}</span>
                    <Button className={styles.cartBtn} onClick={()=>handleIncrease(record)}>+</Button>
                </span>
            )
        },
        {
            keys:'name',
            title:'菜单',
            dataIndex:'name'
        },
        {
            keys:'price',
            title:'价格',
            dataIndex:'price'
        }
    ];

    //减
    const handleDecrease=(record)=>{
        //拿到cart的数据
        let {cart}=this.state;
        //获取当前点击的数据的下标
        const index =cart.findIndex(item=>item.key===record.key);
        //获取当前点击的数据对象
        const current=cart[index];
        //console.log(current);
        //当前数量小于等于1时，购物车的商品移除 否则商品减1
        if(current.count<=1){
            cart.splice(index,1);
        }
        else{
            //先移除掉商品 再更改商品的count属性  然后再重新渲染
            cart.splice(index,1,{
                ...current,
                count:current.count-1
            });
        }
        this.setState({
            cart
        });
    }
    //加
    const handleIncrease=(record)=>{
         //拿到cart的数据
         let {cart}=this.state;
         //获取当前点击的数据的下标
         const index =cart.findIndex(item=>item.key===record.key);
         //获取当前点击的数据对象
         const current=cart[index];
         //先移除掉商品 再更改商品的count属性  然后再重新渲染
         cart.splice(index,1,{
                 ...current,
                 count:current.count+1
         });
         this.setState({
             cart
         });
    }
    return (
        <Table
           pagination={false}
           className={styles.cart}
           dataSource={this.state.cart}
           columns={columns}
           locale={
               {
                   emptyText:'购物车没有任何商品'
               }
           }
        >
        </Table>
    );
  }

    render(){
        //计算总价  最后一个参数为初始化为0
        const totalPrice=this.state.cart.reduce((total,item)=>(total +=item.price*item.count),0);
        return(
            <Row>
                <Col sm={24} md={15}>{this.renderMenuTable()}</Col>
                <Col sm={24} md={8}>
                  {this.renderCartTable()}
                  <p className={styles.totalPrice}>总价:{totalPrice}</p>
                  <Button type="primary" className={styles.submitBtn}>
                      提交
                  </Button>
                </Col>
            </Row>
        )
    }
}